<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-04-17 13:38:17
 * @LastEditTime : 2023-05-12 16:19:52
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/distribution/bonus/index.vue
 * @Description  : -奖金配置
-->
<template>
  <div class="app-container input-class">
    <el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="150px">
      <el-table v-loading="loading" :data="list" border align="center">
        <el-table-column label="" align="center" prop="name" />
        <el-table-column label="直推（%）" align="center" prop="directPush">
          <template slot-scope="scope">
            <el-form-item>
              <el-input type="number" :disabled="scope.row.disabled" v-model="scope.row.directPush"
                placeholder=""></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="平级（%）" align="center" prop="levelPush">
          <template slot-scope="scope">
            <el-form-item>
              <el-input type="number" :disabled="scope.row.disabled" v-model="scope.row.levelPush"
                placeholder=""></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="奖金池（%）" align="center" prop="bonusPool">
          <template slot-scope="scope">
            <el-form-item v-if="scope.row.id == '1' || scope.row.id == '2'">
              <el-input type="number" :disabled="scope.row.disabled" v-model="scope.row.bonusPool"
                placeholder=""></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" :disabled="buttonLoading" @click="handleEdit(scope)" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="button-box">
        <el-button type="primary" :loading="buttonLoading" :disabled="buttonLoading" @click="submit">提 交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { selectProp, updateProp } from "@/api/distribution";
export default {
  name: "bonusPage",
  data() {
    return {
      // 遮罩层
      loading: false,
      list: [
        {
          'id': '0',
          'name': '个人',
          'directPush': '',
          'levelPush': '',
          'bonusPool': '',
          'disabled': true
        },
        {
          'id': '1',
          'name': '代理',
          'directPush': '',
          'levelPush': '',
          'bonusPool': '',
          'disabled': true
        },
        {
          'id': '2',
          'name': '分公司',
          'directPush': '',
          'levelPush': '',
          'bonusPool': '',
          'disabled': true
        }
      ],
      form: {},
      rules: {},
      buttonLoading: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 编辑
    handleEdit(scope) {
      this.list[scope.$index].disabled = false;
    },
    // 提交
    submit() {
      const params = {
        branchDirectProp: '',
        branchLevelProp: '',
        branchBonusPool: '',
        agentDirectProp: '',
        agentLevelProp: '',
        agentBonusPool: '',
        personDirectProp: '',
        personLevelProp: ''
      }
      params.branchDirectProp = this.list[2].directPush;
      params.branchLevelProp = this.list[2].levelPush;
      params.branchBonusPool = this.list[2].bonusPool;
      params.agentDirectProp = this.list[1].directPush;
      params.agentLevelProp = this.list[1].levelPush;
      params.agentBonusPool = this.list[1].bonusPool;
      params.personDirectProp = this.list[0].directPush;
      params.personLevelProp = this.list[0].levelPush;
      this.buttonLoading = true;
      updateProp(params).then(res => {
        this.buttonLoading = false;
        this.$modal.msgSuccess(res.msg);
      })
    },
    getData() {
      this.loading = true;
      selectProp().then(res => {
        this.loading = false;
        this.list[0].directPush = res.data.personDirectProp;
        this.list[0].levelPush = res.data.personLevelProp;
        this.list[1].directPush = res.data.agentDirectProp;
        this.list[1].levelPush = res.data.agentLevelProp;
        this.list[1].bonusPool = res.data.agentBonusPool;
        this.list[2].directPush = res.data.branchDirectProp;
        this.list[2].levelPush = res.data.branchLevelProp;
        this.list[2].bonusPool = res.data.branchBonusPool;
      })
    }
  }
};
</script>
<style lang="scss">
.input-class {
  .el-form-item {
    margin: 22px 0;
  }
  
  .button-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
}
</style>